<template>
  <div>
    <el-container>
      <!-- 菜单栏 -->
      <el-aside width="180px" style="background-color:white">
        <div style="height:70px; text-align: center; line-height: 70px;" >
      <el-link href="" icon="el-icon-s-promotion" style="font-size:20px;">&nbsp;&nbsp;消息中心</el-link>
    </div>
    <el-menu>
      <el-submenu index="1" @click.native="clickIndex(1)">
        <template slot="title">
          <!-- <el-badge :value="12" class="item"> -->
          <router-link to="/message/myMessage" replace tag="div"><i class="el-icon-chat-dot-round"></i> 我的消息</router-link>
          <!-- </el-badge> --> 
        </template>
      </el-submenu>
      <el-submenu index="2" @click.native="clickIndex(2)">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <!-- <el-badge :value="12" class="item"> -->
            收到的赞
          <!-- </el-badge>  -->
        </template>
      </el-submenu>
      <el-submenu index="3" @click.native="clickIndex(3)">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <!-- <el-badge :value="12" class="item"> -->
            回复我的
          <!-- </el-badge> --> 
        </template>
      </el-submenu>
      <el-submenu index="4" @click.native="clickIndex(4)">
        <template slot="title">
          <i class="el-icon-message"></i>
          <!-- <el-badge :value="12" class="item"> -->
            系统通知
          <!-- </el-badge> --> 
        </template>
      </el-submenu>
    </el-menu>
      </el-aside>
      <el-container>
        <!-- 子标题栏 -->
        <el-header style="height: 45px; background-color: aqua; margin-top: 15px;text-align: center;line-height: 45px;" >
          <strong>{{menus[this.titleIndex]}}</strong>
        </el-header>
        <br>
        <!-- 显示内容 -->
        <el-main style="background-color:antiquewhite;marrgin-top:15px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      menus:['','我的消息','收到的赞','回复我的','系统通知'],
      titleIndex:0 //记录点击了哪个菜单
    }
  },
  methods:{
    clickIndex(args){
      this.titleIndex = args
    }
  }
}
</script>

<style>

</style>